<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>统计页面导航</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, rgba(75, 175, 255, 0.8), rgba(255, 125, 120, 0.8)), url('background.jpg') no-repeat center center/cover;
            backdrop-filter: blur(10px);
            background-attachment: fixed;
        }

        .container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            max-width: 1200px;
            padding: 20px;
            background-color: rgba(255, 255, 255, 0.7);
            border-radius: 20px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
        }

        .stats-item {
            text-decoration: none;
            color: #333;
            padding: 20px;
            text-align: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            background-color: rgba(255, 255, 255, 0.9);
            position: relative;
            overflow: hidden;
        }

        .stats-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        }

        .stats-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(to bottom right, rgba(75, 175, 255, 0.8), rgba(255, 125, 120, 0.8));
            opacity: 0.9;
            z-index: -1;
            transition: opacity 0.3s ease;
            border-radius: 10px;
        }

        .stats-item:hover::before {
            opacity: 0.6;
        }

        .stats-item h2 {
            margin-bottom: 10px;
            font-size: 1.6rem;
            color: #333;
            z-index: 1;
        }

        .stats-item p {
            font-size: 1rem;
            color: #555;
            z-index: 1;
        }
    </style>
</head>
<body>

<div class="container">
    <a href="stats5.html" class="stats-item">
        <h2>统计商品采购数量</h2>
        <p>查看商品采购数量的统计图表</p>
    </a>
    <a href="stats6.html" class="stats-item">
        <h2>超市员工工资前十</h2>
        <p>浏览员工工资前十名的统计数据</p>
    </a>
    <a href="stats7.html" class="stats-item">
        <h2>超市近七日采购总额变化</h2>
        <p>探索超市近七日的采购总额变化情况</p>
    </a>
    <a href="stats3.html" class="stats-item">
        <h2>统计员工的采购总额排名</h2>
        <p>分析员工的采购总额排名情况</p>
    </a>
    <a href="stats1.html" class="stats-item">
        <h2>采购商品价格分布图</h2>
        <p>查看采购商品价格的分布图表</p>
    </a>
    <a href="stats2.html" class="stats-item">
        <h2>合作供应商占比</h2>
        <p>了解合作供应商在总采购中的占比</p>
    </a>
    <a href="stats4.html" class="stats-item">
        <h2>统计采购次数最多的员工</h2>
        <p>分析采购次数最多的员工及其次数</p>
    </a>
    <a href="stats8.html" class="stats-item">
        <h2>统计员工的工资区间</h2>
        <p>查看员工工资分布的统计信息</p>
    </a>
    <a href="stats9.html" class="stats-item">
        <h2>查询最高工资员工</h2>
        <p>查看指定等级员工的最高工资</p>
    </a>
    <a href="stats10.html" class="stats-item">
        <h2>查询采购订单</h2>
        <p>按日期范围查询采购订单详情</p>
    </a>
    <a href="stats11.html" class="stats-item">
        <h2>超市供应厂商分布</h2>
        <p>查看超市供应厂商分布地图</p>
    </a>
    <!-- New statistical page added -->
    <a href="stats12.html" class="stats-item">
        <h2>采购商品平均价格</h2>
        <p>查看采购商品平均价格的统计柱形图</p>
    </a>
</div>

</body>
</html>
